<template>
  <div class="oe-upload" v-loading="loading">
    <div class="clearfix">
      <a-upload
        :action="action"
        listType="picture-card"
        :fileList="fileList"
        @preview="handlePreview"
        @change="handleChange"
        :beforeUpload="beforeUpload"
        :multiple="multiple"
      >
        <div v-if="limit ? fileList.length < limit : true">
          <a-icon type="plus" />
          <div class="ant-upload-text">上传</div>
        </div>
      </a-upload>
      <a-modal :visible="previewVisible" centered :footer="null" @cancel="handleCancel">
        <img alt="preview" style="width: 100%" :src="previewImage" />
      </a-modal>
    </div>
  </div>
</template>

<script>
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}
export default {
  name: 'oeUpload',
  data() {
    return {
      loading: false,
      // imageUrl: '',
      action: '',
      file_system_url: '',
      previewVisible: false,
      cahceFileList: [],
      //  点击预览图片
      previewImage: '',
      // 允许上传的图片类型:
      ImgType: ['jpg', 'jpeg', 'png']
    };
  },
  props: {
    // 限制上传多少张
    limit: {
      type: [Number],
      default: 1
    },
    fileList: {
      type: [Object, Array],
      default() {
        return [
          // {
          //   uid: '-1',
          //    docUrl: '段路径'
          //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
          // }
        ];
      }
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'fileList',
    event: 'update:file'
  },
  // computed:{
  //   isShow(){
  //     let tag  = this.limit ? true : false;
  //     if (tag) {
  //       return this.fileList.length > this.limit;
  //     } else {
  //       return true
  //     }
  //   }
  // },
  mounted() {
    this.loading = true;
    this.$http.post('/api/common/LocalStorage/getUploadUrl').then((rst) => {
      this.loading = false;
      if (rst.code == 1) {
        this.file_system_url = rst.file_system_url;
      } else {
        this.$message.error('获取上传接口失败！');
      }
    });
  },
  methods: {
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      console.log('file', file);
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      console.log('handleChange', fileList);
      this.fileList = fileList;
      this.$emit('update:file', this.fileList);
    },
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        let ext = file.name.split('.')[1];
        let flag = this.ImgType.includes(ext.toLowerCase());
        if (!flag) {
          this.$message.error('您上传的格式暂不支持!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('您上传的文件大小不能超过2MB!');
        }
        if (flag && isLt2M) {
          let type = file.type.split('/')[1];
          let url = `${this.file_system_url}&extension=${type}&encode=base64`;
          this.action = decodeURIComponent(url);
          resolve(file);
        } else {
          reject(file);
        }
      });
    }
  }
};
</script>
